{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}用户管理 - 后台管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">用户管理</h1>
</div>

<!-- 搜索和筛选 -->
<div class="card shadow mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-6">
                <input type="text" name="search" class="form-control" placeholder="搜索用户名、邮箱或昵称..." 
                       value="{{ search_query }}">
            </div>
            <div class="col-md-4">
                <select name="status" class="form-select">
                    <option value="">所有状态</option>
                    <option value="active" {% if status_filter == 'active' %}selected{% endif %}>活跃</option>
                    <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>禁用</option>
                    <option value="staff" {% if status_filter == 'staff' %}selected{% endif %}>管理员</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">筛选</button>
            </div>
        </form>
    </div>
</div>

<!-- 用户列表 -->
<div class="card shadow">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>邮箱</th>
                        <th>用户类型</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>
                            <strong>{{ user.username }}</strong>
                            {% if user.is_staff %}<i class="bi bi-star-fill text-warning" title="Staff"></i>{% endif %}
                        </td>
                        <td>{{ user.nickname|default:"-" }}</td>
                        <td>{{ user.email }}</td>
                        <td>
                            <span class="badge 
                                {% if user.user_type == 'normal' %}bg-secondary
                                {% elif user.user_type == 'admin' %}bg-primary
                                {% else %}bg-success{% endif %}">
                                {{ user.get_user_type_display }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {% if user.is_active %}bg-success{% else %}bg-danger{% endif %}">
                                {{ user.is_active|yesno:"活跃,禁用" }}
                            </span>
                        </td>
                        <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'dashboard:user_detail' user.id %}" class="btn btn-info">详情</a>
                                <button class="btn {% if user.is_active %}btn-warning{% else %}btn-success{% endif %} btn-toggle-status" 
                                        data-user-id="{{ user.id }}"
                                        title="{{ user.is_active|yesno:'禁用,启用' }}用户">
                                    {{ user.is_active|yesno:"禁用,启用" }}
                                </button>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        类型
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item set-user-type" data-user-id="{{ user.id }}" data-user-type="normal">普通用户</a></li>
                                        <li><a class="dropdown-item set-user-type" data-user-id="{{ user.id }}" data-user-type="admin">管理员</a></li>
{#                                        <li><a class="dropdown-item set-user-type" data-user-id="{{ user.id }}" data-user-type="super_admin">超级管理员</a></li>#}
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">暂无用户数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 切换用户状态
    document.querySelectorAll('.btn-toggle-status').forEach(btn => {
        btn.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const action = this.textContent;
            
            if (confirm(`确定要${action}这个用户吗？`)) {
                fetch(`{% url 'dashboard:toggle_user_status' 0 %}`.replace('0', userId), {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                });
            }
        });
    });

    // 设置用户类型
    document.querySelectorAll('.set-user-type').forEach(link => {
        link.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const userType = this.dataset.userType;
            const userTypeText = this.textContent;
            
            if (confirm(`确定要将用户设置为"${userTypeText}"吗？`)) {
                fetch(`{% url 'dashboard:set_user_type' 0 %}`.replace('0', userId), {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `user_type=${userType}`
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                });
            }
        });
    });
});
</script>
{% endblock %}